<template>
  <div class="item_content">
    <template v-if="data.template_type == 'titleBar'">
      <div class="title">
        <div class="bar" :style="barStyle"></div>
        <div class="txt" :style="barColor">
          <i
            :class="data.params.icon + ' iconfont'"
            v-if="data.params.titleBarType == 0"
            style="margin-right:5px"
          ></i>
          {{ data.params.title }}
        </div>
        <div class="bar" :style="barStyle"></div>
      </div>
    </template>
    <template v-if="data.template_type == 'shangpinzu'">
      <div class="goods" :style="goodstyle">
        <ul :class="calssName">
          <li
            v-for="(item, i) in data.params.list.length > 0
              ? data.params.list
              : list"
            v-if="i < data.params.limit"
            class="good-box"
            :style="data.params.list_type == 'list' ? itemstyle : ''"
            :key="i"
          >
            <div class="good-box-item" :style="itemstyle">
              <div class="img-box">
                <div class="good-img-box">
               <!--   <img
                    v-if="item.master"
                    mode="widthFix"
                    lazy-load=""
                    :src="item.master"
                    alt=""
                    class="good-img"
                    draggable="false"
                  /> -->
				  <vimage  v-if="item.master"
                    mode="widthFix"
                    lazy-load=""
                    :src="item.master"
                    alt=""
                    class="good-img"
                    draggable="false"></vimage>
                  <img
                    v-else
                    src="@/assets/images/goods_col2.png"
                    alt=""
                    class="good-img"
                    draggable="false"
                  />
                </div>
                <p
                  class="title"
                  v-if="data.params.list_type != 'list'"
                  :style="'color:' + data.params.t_color"
                >
                  {{ item.name }}
                </p>
              </div>
              <div v-if="data.params.list_type != 'list'" class="box-bottom">
                <div class="price">
                  <span
                    v-if="data.params.pro_price.show"
                    class="pro-price"
                    :style="'color:' + data.params.pro_price.color"
                  >
                    ￥
                    <i>{{ item.has_sku ? item.min_price : item.sell_price }}</i>
                  </span>
                  <span
                    v-if="data.params.del_price.show"
                    class="del-price"
                    :style="'color:' + data.params.del_price.color"
                  >
                    <i class="del-icon">{{
                      data.params.del_price.title
                        ? data.params.del_price.title + ":"
                        : ""
                    }}</i>
                    <i class="del-num">￥{{ item.original_price }}</i>
                  </span>
                </div>
                <div class="btn">
                  <span
                    v-show="data.params.add_button.show"
                    class="buybtn-icon buybtn iconfont-m- icon-m-buy1"
                  >
                    <i
                      :style="
                        'font-size:20px;color:' +
                          data.params.add_button.color +
                          ';'
                      "
                      :class="data.params.add_button.icon + ' iconfont'"
                    ></i>
                  </span>
                  <span
                    v-if="data.params.sales_num.show"
                    class="sales-num"
                    :style="'color:' + data.params.sales_num.color"
                    >{{ data.params.sales_num.title || "销量" }}:{{
                      item.sell
                    }}</span
                  >
                </div>
              </div>
              <div
                v-if="data.params.list_type == 'list'"
                class="right van-hairline--bottom"
              >
                <div>
                  <p class="title" :style="'color:' + data.params.t_color">
                    {{ item.name }}
                  </p>
                  <p class="subtitle">{{ item.subtitle }}</p>
                </div>
                <div class="right-bottom">
                  <div class="price">
                    <span
                      v-if="data.params.pro_price.show"
                      class="pro-price"
                      :style="'color:' + data.params.pro_price.color"
                    >
                      ￥
                      <i>{{ item.sell_price }}</i>
                    </span>
                    <span
                      v-if="data.params.del_price.show"
                      class="del-price"
                      :style="'color:' + data.params.del_price.color"
                    >
                      <i class="del-icon">{{
                        data.params.del_price.title
                          ? data.params.del_price.title + ":"
                          : ""
                      }}</i>
                      <i class="del-num">￥{{ item.original_price }}</i>
                    </span>
                  </div>
                  <div class="btn">
                    <span
                      v-show="data.params.add_button.show"
                      class="buybtn-icon buybtn iconfont-m- icon-m-buy1"
                    >
                      <i
                        :style="
                          'font-size:20px;color:' +
                            data.params.add_button.color +
                            ';'
                        "
                        :class="data.params.add_button.icon + ' iconfont'"
                      ></i>
                    </span>
                    <span
                      v-if="data.params.sales_num.show"
                      class="sales-num"
                      :style="'color:' + data.params.sales_num.color"
                      >{{ data.params.sales_num.title || "销量" }}:{{
                        item.sell
                      }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: 5,
          type: 1,
          name: "这是一个商品名称",
          subtitle: "这是一个商品副名称",
          master: "",
          sell_price: "244.00",
          original_price: "500.00",
          sell: 0
        },
        {
          id: 15,
          type: 1,
          name: "这是一个商品名称",
          subtitle: "这是一个商品副名称",
          master: "",
          sell_price: "255.00",
          original_price: "500.00",
          sell: 0
        }
      ]
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  computed: {
    barStyle() {
      return "background:" + this.data.params.bar_color + ";";
    },
    barColor() {
      return "color:" + this.data.params.bar_color + ";";
    },
    calssName() {
      // let class=''
      return (
        "goods-list " +
        this.data.params.show_type +
        " " +
        this.data.params.list_type
      );
    },
    itemstyle() {
      return (
        "background:" +
        this.data.params.bg +
        ";border-radius:" +
        this.data.params.r_t / 2 +
        "px " +
        this.data.params.r_t / 2 +
        "px " +
        this.data.params.r_b / 2 +
        "px " +
        this.data.params.r_b / 2 +
        "px "
      );
    },
    goodstyle() {
      return (
        "padding: " +
        this.data.params.p_t / 2 +
        "px " +
        this.data.params.p_lr / 2 +
        "px " +
        this.data.params.p_b / 2 +
        "px"
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.form-templates {
  background: #ffffff;
  padding: 0 20px;
  padding-bottom: 20px;
  .el-checkbox {
    margin-bottom: 10px;
  }
  .item_label {
    display: flex;
    align-items: center;
    padding: 16px 0;
    .label_required {
      margin-left: 5px;
      margin-right: 10px;
      color: #de434f;
    }
  }
  .item_tip {
    font-size: 12px;
    line-height: 17px;
    padding-bottom: 18px;
    color: #969696;
    word-break: break-all;
  }

  .img_box {
    width: 60px;
    height: 60px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
    flex-direction: column;
    i {
      font-size: 20px;
      margin-bottom: 6px;
    }
    span {
      font-size: 10px;
    }
  }
  .select_div {
    width: 100%;
    border: 1px solid #dcdfe6;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 13px;
  }
  .tip {
    color: #dcdfe6;
  }
}
</style>
<style scoped lang="scss">
.goods {
  width: 100%;
  overflow: auto;
  padding: 8px 12px 0;

  i {
    font-style: normal;
  }

  .goods-list {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    min-width: 100%;
    box-sizing: border-box;
    padding-left: 0;

    .good-box {
      flex-shrink: 0;
      overflow: hidden;

      .good-box-item {
        overflow: hidden;
      }

      .img-box {
        overflow: hidden;
        position: relative;

        .good-img-box {
          position: relative;
          overflow: hidden;

          .good-img {
            width: 100%;
            display: block;
          }
        }
      }

      .title {
        width: 100%;
        box-sizing: border-box;
        color: #212121;
        font-family: PingFang SC;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 20px;
        max-height: 40px;
        padding: 0 8px;
        margin: 8px 0 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .box-bottom {
        width: 100%;
        display: flex;
        box-sizing: border-box;
      }

      .btn {
        display: flex;
        flex-direction: column;
        margin: 0;

        .buybtn {
          font-size: 24px;
          height: 24px;
          line-height: 24px;
          text-align: right;
        }

        .sales-num {
          height: 14px;
          font-size: 10px;
          line-height: 14px;
          color: #969696;
          text-align: right;
        }
      }
      .price {
        display: flex;
        flex-direction: column;

        .pro-price {
          height: 24px;
          box-sizing: border-box;
          font-size: 12px;
          line-height: 17px;

          i {
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            text-overflow: ellipsis;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            font-style: normal;
            font-weight: bold;
          }
        }

        .del-price {
          display: flex;
          align-items: center;
          height: 14px;
          line-height: 14px;

          .del-icon {
            display: inline-block;
            font-size: 10px;
            height: 14px;
            line-height: 14px;
          }

          .del-num {
            display: inline-block;
            font-size: 10px;
            height: 14px;
            line-height: 14px;
            text-decoration: line-through;
          }
        }
      }
    }

    &.scroll {
      flex-direction: row !important;
      flex-wrap: nowrap;

      .good-box {
        padding-left: 8px;

        .good-box-item {
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .good-img-box {
            height: 156px;
            overflow: hidden;

            .good-img {
              min-height: 100%;
            }
          }
        }

        .box-bottom {
          padding: 0 8px 8px;
          justify-content: space-between;
        }
      }

      &.one {
        flex-direction: column;

        .good-box {
          width: 296px;

          .good-img-box {
            overflow: hidden;
            width: 100%;
            height: 138px;
          }
        }
      }

      &.two {
        .good-box-item {
          width: 156px;
        }
      }

      &.three {
        .del-price,
        .sales-num {
          display: none !important;
        }

        .good-box-item {
          width: 102px;

          .good-img-box {
            width: 100%;
            height: 102px;
            margin-bottom: 8px;
          }
        }
      }
    }

    &.block {
      &.one .good-box {
        width: 100%;

        .good-box-item {
          padding-bottom: 8px;

          .good-img-box {
            height: 161px;
          }
        }
      }

      &.one .good-box:nth-child(n + 2) {
        margin-top: 8px;
      }

      &.two .good-box {
        width: 50%;

        .good-box-item {
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .good-img-box {
            height: 172px;
          }
        }
      }

      &.two .good-box:nth-child(odd) {
        padding-right: 4px;
      }
      &.two .good-box:nth-child(even) {
        padding-left: 4px;
      }
      &.two .good-box:nth-child(n + 3) {
        margin: 8px 0 0;
      }

      &.three {
        .good-box {
          width: 33.33%;

          .del-price,
          .sales-num {
            display: none;
          }

          .good-img-box {
            height: 112px;
            margin-bottom: 8px;
          }
        }

        .good-box:nth-child(n + 4) {
          margin: 8px 0 0;
        }

        .good-box:nth-child(3n-1),
        .good-box:nth-child(3n) {
          padding-left: 4px;
        }

        .good-box:nth-child(3n-2),
        .good-box:nth-child(3n-1) {
          padding-right: 4px;
        }
      }

      .box-bottom {
        padding: 0 8px 8px;
        justify-content: space-between;
      }
    }

    &.list .good-box {
      border-radius: 0;
      width: 100%;
      margin: 0 auto;
      flex-direction: row;
      padding: 8px 12px 0;

      .right {
        height: 140px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 8px;
        box-sizing: content-box;
        overflow: hidden;
        .title {
          margin-top: 0;
          padding: 0;
        }
        .subtitle {
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 12px;
          line-height: 17px;
          color: #969696;
          padding: 0;
          margin-bottom: 11px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          box-sizing: border-box;
        }
        .right-bottom {
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          margin-bottom: 0;
          .price {
            display: flex;
            flex-direction: column;
            .pro-price {
              height: 24px;
            }
          }
        }
      }

      .good-box-item {
        display: flex;
      }

      .img-box {
        width: 140.47231px;
        height: 140.47231px;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-right: 8px;

        .good-img-box {
          height: 100%;
          display: block;

          .good-img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px;
  align-items: center;
  .txt {
    margin: 0 25px;
    font-size: 14px;
    color: #999;
    font-weight: bold;
  }
  .bar {
    width: 30px;
    height: 2px;
    background: #999;
    display: block;
  }
}
</style>
